<template>
	<view>

		<view v-if="showimg == true" class="dataims">
			<image :src="dataimg">
		</view>
		<view v-else class="emptys" style="padding:50px 0 0 0;">
			<u-empty text="暂不支持预览" mode="data"></u-empty>
		</view>
		<view class="fde_btn">
			<!-- #ifndef H5 -->
			<u-button type="error" v-if="dataimg.indexOf('http') != -1" :custom-style="customStyle" @click="saveFile">下载</u-button>
			<!-- #endif -->
			<u-button type="error" :style="{width:(dataimg.indexOf('http') != -1)?'50%':'100%'}" @click="emailclick">发送到邮箱</u-button>
		</view>

		<u-popup v-model="popshow" mode="center" border-radius="10" closeable>
			<view style="padding:0 15px 20px 15px;width:260px;">
				<view class="emailtitle">发送到邮箱</view>
				<u-input style="width:100%;margin:10px 0 0 0;" v-model="email" placeholder="请输入邮箱地址" type="text" :border="true" />
				<view class="popyesbtn">

					<u-button @tap="popshow = false;">取消</u-button>
					<u-button type="error" @tap="determine">确定</u-button>
				</view>

			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		sendFileToEmail
	} from "@/apis/task";
	export default {

		data() {
			return {
				files: [],
				imageTypes: ["jpg", "jpeg", "png", "gif","JPG","PNG","JPEG","GIF"],
				dataimg: '',
				showimg: false,
				empty: false,
				customStyle: {
					// borderRa
					background: '#ffffff',
					color: 'red',
					border: '1px solid red'
				},
				popshow: false,
				email: '',
				itemsdata: ''
			};
		},

		onLoad(options) {
			var data = JSON.parse(options.url)
			this.itemsdata = data
			var typs = data.type
			console.log("----->:文件地址：", data, "\n----->文件类型：", typs);
			uni.setNavigationBarTitle({
				title: data.name
			})
			this.email = this.$store.state.userInfo.email || '';
			if (this.imageTypes.includes(typs) == true) {
				this.dataimg = data.url
				this.showimg = true
			} else {
				this.showimg = false
			}

		},

		methods: {
			/**
			 * 预览文件
			 */
			emailclick() {
				this.popshow = true
			},
			saveFile() {
				// 下载图片
				uni.showLoading({
					title:"加载中"
				})
				let _this = this;
				uni.downloadFile({
					url: this.dataimg,
					success: (res) => {
						uni.hideLoading();
						if (res.statusCode === 200) {

							// 保存到相册
							uni.saveImageToPhotosAlbum({
								filePath: res.tempFilePath,
								success: function() {
									_this.$toast("保存成功");
								}
							});
							// 保存到相册
						}
					},
					fail() {
						uni.hideLoading();
						_this.$toast("保存失败");
					}
				});
			},
			async determine() {
				if (this.email == '') {
					this.$toast("请输入邮箱地址");
				} else {
					let params = {
						Title: this.itemsdata.name,
						Email: this.email,
						Link: this.itemsdata.url
					}
					let {
						code,
						message
					} = await sendFileToEmail(params);
					if (code == 200) {
						this.$toast(message, "success");
						this.popshow = false
					} else {
						this.$toast(message, "error");
					}


				}
			}
		},
	};
</script>

<style lang="scss" scoped>
	.fde_btn {
		position: fixed;
		bottom: 0;
		width: 100%;
		display: flex;

		.u-btn {
			width: 50%;
			border-radius: 0;
		}
	}

	.emailtitle {
		padding: 10px 0 0 0;
		text-align: center;
	}

	.popyesbtn {
		display: flex;
		padding: 20px 0 0 0;
	}

	.dataims {
		display: flex;
		justify-content: center;

		img {
			display: block;
			width: 100%;
			height: 100%;
		}
	}

	.emptys {
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>
